
window.onload = function () {
//�ֲ�ͼ
//�Զ��ֲ�
    var banner = document.querySelector('.jd_banner');
    var imgBox = banner.querySelector('ul:first-of-type');
    var first = imgBox.querySelector('li:first-of-type');
    var last = imgBox.querySelector('li:last-of-type');
    imgBox.appendChild(first.cloneNode(true));
    imgBox.prepend(last.cloneNode(true));
    var lis = imgBox.querySelectorAll('li');
    var count = lis.length;
    //banner�Ŀ��
    var bannerWidth = banner.offsetWidth;
    //imgBoxde ���
    var imgBoxWidth = count * bannerWidth + 'px';
    //li�����ͼƬ�Ŀ��
    for (var i = 0; i < count; i++) {
        lis[i].style.width = bannerWidth + 'px';
    }
    //����ƫ��
    imgBox.style.left = -bannerWidth + 'px';
    //��������ű仯ʱ��������
    window.onresize = function () {
        bannerWidth = banner.offsetWidth;
        imgBoxWidth = count * bannerWidth + 'px';
        for (var i = 0; i < count; i++) {
            lis[i].style.width = bannerWidth + 'px';
        }
        imgBox.style.left = -bannerWidth + 'px';
    }
    //����ͼƬ����������һ��ͼƬ������Ϊ1
    var index = 1;
    var timerId;
    function startTime () {
        timerId = setInterval(function () {
            index++;
            //����Ч��
            imgBox.style.transition = 'left 0.5s ease-in-out';
            imgBox.style.left = -index * bannerWidth + 'px';
            setTimeout(function () {
                if (index == count - 1) {
                    index = 1;
                    //�������Ч��
                    imgBox.style.transition = 'none';
                    imgBox.style.left = -index * bannerWidth + 'px';
                }
            },500)
        },2000)
    }
    startTime();
    //Բ�������ʾ
    function circleLight () {
        var circle = banner.querySelector('ol').querySelectorAll('li');
        for(var i = 0; i < circle.length; i++) {
            circle[i].classList.remove('active')
        }
        circle[index - 1].classList.add('active');
    }
    //�ֶ��ֲ�
    var isEnd = true;
    var startX, moveX, distanceX;
    window.addEventListener('touchstart',function (e) {
        clearInterval(timerId);
        //��ȡ��ʼ������ֵ
        startX = e.targetTouches[0].clientX;
    })
    window.addEventListener('touchmove',function (e) {
        if (isEnd) {
            //��ȡ�ƶ������е�����ֵ
            moveX = e.targetTouches[0].clientX;
            distanceX = moveX - startX;
            //console.log(distanceX)
            //ȡ������Ч��
            imgBox.style.transition = 'none';
            imgBox.style.left = -index * bannerWidth + distanceX + 'px';
        }
    })
    window.addEventListener('touchend',function () {
        isEnd = false;
        //�����ק����100���ƶ���С��100����
        if (Math.abs(distanceX) > 100) {
            if (distanceX > 0) {
                index--;
                imgBox.style.transition = 'left 0.5s ease-in-out';
                imgBox.style.left = -index * bannerWidth + 'px';
            } else {
                index++;
                imgBox.style.transition = 'left 0.5s ease-in-out';
                imgBox.style.left = -index * bannerWidth + 'px';
            }
        } else if (Math.abs(distanceX) > 0) {
            imgBox.style.transition = 'left 0.5s ease-in-out';
            imgBox.style.left = -index * bannerWidth + 'px';
        }
        //��ʼ��
        startX = 0;
        moveX = 0;
        distanceX = 0;
    })
    //������Ч������֮����
    window.addEventListener('webkitTransitionEnd',function () {
        //�������һ�ź͵�һ��ͼƬ��ʱ���л�ͼƬ
        if (index == 0) {
            index = count - 2;
            imgBox.style.transition = 'none';
            imgBox.style.left = -index * bannerWidth + 'px';
        } else if (index == count - 1) {
            index = 1;
            imgBox.style.transition = 'none';
            imgBox.style.left = -index * bannerWidth + 'px';
        }
        circleLight(index)
        setTimeout(function () {
            isEnd = true;
            clearInterval(timerId);
            startTime();
        },100)
    })


























}



